<template>
  <div class="slider-box">
    <a-slider class="slider" v-model:value="inputValue" :min="min" :max="max" :step="step" />
    <a-input-number class="input" v-model:value="inputValue" :min="min" :max="max" :step="step" size="small"/>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
  name: "slider-box",
  props:{
    value: {
      type: Number,
      default: 1.0,
    },
    min: {
      type: Number,
      default: 0.0,
    },
    max: {
      type: Number,
      default: 1.0,
    },
    step: {
      type: Number,
      default: 0.01,
    }
  },
  computed:{
    inputValue:{
      get(){
        return this.value;
      },
      set(val){
        this.$emit("update:value",val)
        this.$emit("change",val)
      }
    }
  },
  methods:{

  }
});
</script>

<style lang="less">
.slider-box {
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 100%;

  .slider{
    box-sizing: border-box;
    flex-grow: 1;
    padding-right: 5px;
    margin-right: 1em;
  }

  .input{
    width: 5em;
    color: #555;
    background-color: rgba(255, 255, 255, 0.85);
  }
}
</style>
